이벤트 전파

❓질문

이벤트 전파가 무엇인지 설명해주세요


💡 조사하기전 내가 알고 있던 내용

이벤트 전파란 DOM에서 이벤트가 발생했을때 상위의 요소에서 하위의 타겟요소로 탐색(캡쳐링) , 하위의 타겟요소에서 상위의 요소로 전파(버블링) 되는 현상이다

타겟 요소 까지에 접근했을때 타겟요소의 이벤트 리스너에 걸어둔 로직이 동작한다.

이때 캡쳐링 , 버블링 도중 만나는 이벤트 리스너가 있으면 실행될수있다
이벤트 전파를 막기 위한 메소드로는 event.stopPropagation()이나 preventDefault()가 있다.


🏫 정리한 내용

대략적인 설명은 위와 같다. 단

이벤트 버블링은 실제 발생한 요소에서 상위 요소로 전파 되므로 하나의 상위요소에서 동적으로 생기는 하위 요소들을 전부 컨트롤 할수있다 이는 이벤트 위임를 가능하게 하며 불필요하게 여러개의 리스너를 등록하지않아도 되어 메모리상 이득을 볼수있다.

캡쳐링의 경우 하위 요소로 내려가다 중간에 미리 가로채어 특수한 로직을 실행한다던지 보안검증등 로직을 추가할수있다.